<!DOCTYPE html>
<html lang="en">{% load static %}

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{% block title %}{{ data.intro_tab }}{% endblock %}</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
    <link rel="stylesheet" type="text/css" href="{% static '/home/css/bootstrap.min.css' %}" />
    {% block this_css %}{% endblock %}
    <link rel="stylesheet" type="text/css" href="{% static '/home/css/templatemo-style.css' %}" />
</head>

<body>
    <div class="tm-page-container mx-auto">
        <header class="tm-header text-center">
          <h1 class="tm-title text-uppercase">{{ data.company_name}}</h1>
          <p class="tm-primary-color"><i>{{ data.slogan }}</i></p>
        </header>

        <section class="tm-section">
            <nav class="tm-nav">
            {% block nav %}
                <ul>
                    <li class="active">
                        <a href="/"><span class="tm-nav-deco"></span>{{ data.intro_tab }}</a>
                    </li>
                    <li>
                        <a href="/gallery/"><span class="tm-nav-deco"></span>{{ data.gallery_tab }}</a>
                    </li>
                    <li>
                        <a href="/contact/"><span class="tm-nav-deco"></span>{{ data.contact_tab }}</a>
                    </li>
                </ul>
            {% endblock %}
            </nav>
            <div class="tm-content-container">
                {% block body %}{% endblock %}
            </div>
        </section>

        <footer>
            <span>{{ data.copyright }} <a href="https://beian.miit.gov.cn/" target="_blank">{{ data.beian }}</a></span>
        </footer>
    </div>
{% block this_js %}{% endblock %}
</body>
</html>